<template>
  <div class="cesium-container" ref="mapRef" >
  </div>
</template>

<script setup>
import { 
  Cartesian3,
  createOsmBuildingsAsync,
  Ion,
  IonImageryProvider,
  Math as CesiumMath, 
  Terrain, 
  Viewer,
  WebMapTileServiceImageryProvider,
  IonWorldImageryStyle,
  ImageryLayer,
  HeadingPitchRoll
   } from 'cesium';
import "cesium/Build/Cesium/Widgets/widgets.css";
import config from '../config'

defineProps({
  msg: String,
});
Ion.defaultAccessToken = config.token
const mapRef = ref(null);
onMounted(async () => {
  const viewer = new Viewer(mapRef.value, {
    // scene3DOnly: true,
    // terrain: Terrain.fromWorldTerrain(),
    // baseLayerPicker: false
  });   
  // 隐藏默认地图 
  // viewer.imageryLayers.get(0).show = false
  // 设置天地图
  // let imageryProvider = new WebMapTileServiceImageryProvider({
  //   url: "http://t0.tianditu.com/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk="+config.key,
  //   layer: "tdtBasicLayer",
  //   style: "default",
  //   format: "image/jpeg",
  //   tileMatrixSetID: "googleMapsCompatible"
  // })
  // viewer.imageryLayers.addImageryProvider(imageryProvider)
  // 定位到指定坐标和海拔处.
  // viewer.camera.flyTo({
  //   destination: Cartesian3.fromDegrees(126.640496,45.749083, 1200),
  //   orientation: {
  //     heading: CesiumMath.toRadians(0.0),
  //     pitch: CesiumMath.toRadians(-30.0),
  //   }
  // });

// // Add Cesium OSM Buildings, a global 3D buildings layer.
//   const buildingTileset = await createOsmBuildingsAsync();
//   viewer.scene.primitives.add(buildingTileset);

  // 图层
  // viewer.imageryLayers.remove(viewer.imageryLayers.get(0));
  // const layer = viewer.imageryLayers.addImageryProvider(
  //   await IonImageryProvider.fromAssetId(3812) 3954
  // );
  // viewer.imageryLayers.addImageryProvider(await IonImageryProvider.fromAssetId(3954));

  // 配置视窗
  // viewer.scene.globe.enableLighting = true;
  const initialPosition = new Cartesian3.fromDegrees(
    126.638197,
    45.747875,
    2631.082799425431
  );
  const initialOrientation = new HeadingPitchRoll.fromDegrees(
    25.1077496389876024807,
    -31.987223091598949054,
    0.025883251314954971306
  );
  // console.log('initialOrientation::: ', initialOrientation);
  const homeCameraView = {
      destination : initialPosition,
      orientation : {
          heading : initialOrientation.heading,
          pitch : initialOrientation.pitch,
          roll : initialOrientation.roll
      }
  };
  // Set the initial view
  viewer.scene.camera.setView(homeCameraView);

  // Add some camera flight animation options
  homeCameraView.duration = 2.0;
  homeCameraView.maximumHeight = 2000;
  homeCameraView.pitchAdjustHeight = 2000;
  homeCameraView.endTransform = Cesium.Matrix4.IDENTITY; // 初始
  // Override the default home button
  viewer.homeButton.viewModel.command.beforeExecute.addEventListener(function (e) {
      e.cancel = true;
      viewer.scene.camera.flyTo(homeCameraView);
  });
})
   
</script>

<style scoped>
.cesium-container {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  position: relative;
  background: url('../assets/images/bg.jpg') no-repeat;
  background-size: cover;
}
</style>
